<template>
  <div class="list-page">
    <div class="middle">
      <div class="top">
        <el-button type="primary" v-if="$store.state.userInfo.role==1&&!tableList.hideBtn" @click="viewModal.open = true">
          {{ tableList.name }}
        </el-button>
      </div>
      <div class="first">
        <div>
          <el-table
            border
            :resizable="false"
            :header-row-style="{'color': '#000'}"
            :show-overflow-tooltip="true"
            :data="tabledata"
            style="width: 100%">
            <el-table-column 
              v-for="(item, i) in tableList.column"
              :key="i"
              :prop="item.field"
              :min-width="item.minWidth"
              :label="item.title"
              :width="item.width">
              <template slot-scope="scope" v-if="item.componentName">
                  <el-button type="primary" v-if="$store.state.userInfo.role==1" @click="view(scope.$index, scope.row)">查看回复</el-button>&nbsp;
                  <el-button type="primary" v-if="$store.state.userInfo.role==2" @click="handle(scope.$index,scope.row)">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
      <el-dialog  title="回复" :visible="viewModal.open" width="35%">
        <div class="modal-content">
          <div>
            <span>备注：</span>
            <el-input  type="textarea" v-if="$store.state.userInfo.role==2" name="" id="" cols="30" rows="10"/>
            <p v-if="$store.state.userInfo.role==1"></p>
          </div>
          <div>
            <span>图片：</span>
            <el-upload
              class="upload-wrapper"
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :limit="3"
              :file-list="fileList">
              <el-button type="primary" size="medium" plain icon="el-icon-upload">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-image :src="'../../assets/img/login.jpg'" class="modal-return" alt=""/>
          </div>
          <div>
            <span>用户公司社会统一信用代码：</span>
            <el-input type="text" placeholder="统一信用代码"/>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="viewModal.open = false">取 消</el-button>
          <el-button type="primary" @click="viewModal.open = false">确 定</el-button>
        </span>
      </el-dialog>
    <!-- 业务员接收用户任务部分 -->
    <el-dialog :title="'提示'" :visible="handleModal.open" width="30%">
      <span>确认处理？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleModal.open = false">取 消</el-button>
        <el-button type="primary" @click="closeHandle">确 定</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>

<script type="text/javascript">
import { financeTable } from "../../constants/pages/financeTable";
import { companyTable } from "../../constants/pages/companyTable";
import Vue from "vue";
export default {
  props: ['tableCloumn'],
  name: "list-page",

  data() {
    return {
      financeTable: financeTable,
      companyTable: companyTable,
      viewModal: {
        open: false
      },
      handleModal: {
        open: false
      },
      tabledata: [{
        qyyxmc: '苏州点控科技有限公司'
      }],
      tableList: "",
      fileList: []
    };
  },
  watch: {
    $route: "pageChange"
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let vm = this, i, _tableCloumn;
      vm.tableList = vm.tableCloumn ? vm.tableCloumn : vm.$route.params.type  // 如果有tableCloumn用tableCloumn，否则用route参数
        ? vm[`${vm.$route.params.category}Table`][vm.$route.params.type]
        : vm[`${vm.$route.params.category}Table`];
        _tableCloumn = vm.tableList.column;
        i = _tableCloumn.length - 1;
        for(;0 < i; i--) {
          if (_tableCloumn[i].tableHide) {
            _tableCloumn.splice(i, 1);
          }
        }
    },
    closeHandle () {
      let vm = this;
      vm.viewModal.open = true;
      vm.handleModal.open = false;
    },
    view(obj) {
      let vm = this;
      vm.viewModal.open = true;
    },
    handle(obj) {
      let vm = this;
      vm.handleModal.open = true;
    },
    pageChange() {
      this.init();
    }
  },
  components: {}
};
</script>

<style lang="less" scoped>
.list-page {
  .top {
    margin-bottom: 10px;
  }
  .middle {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    .first,
    .second {
      ul {
        li {
          display: inline-block;
          width: 40%;
          height: 500px;
          margin-right: 5%;
        }
      }
    }
  }
  .right {
    float: right;
    vertical-align: top;
    width: 23%;
  }
  .modal-content{
    >div{
      margin-bottom: 20px;
    }
    .modal-return{
      width: 200px;
      height: 150px;
      vertical-align: top;
    }
  }
}
</style>
